import React from 'react';
import { Layout } from 'antd';
import { Menu } from 'antd';
import { useNavigate } from "react-router-dom"
import { Outlet } from "react-router-dom"

import "../styles/Index.scss"

import logo from "../pictures/logo.png"
import kefu from "../pictures/kefu.png"

const { Header, Content } = Layout;
interface Props {

}
interface MenuItem {
    item: object
    key: string
}

function Index(props: Props) {
    var navigate = useNavigate()
    var handleClick = function ({ item, key }: MenuItem) {
        console.log(key);
        navigate(key)
    }
    return (
        <div className='index'>
            <Layout >
                <Header className='myheader'  >
                    <div className="left">
                        <span><img src={logo} alt="" /></span>
                        <span>三棵树客服中心</span>
                        {/* 水平导航菜单 */}
                        <Menu className='mymenu' theme='light' mode="horizontal" defaultSelectedKeys={['/index/home']} onClick={handleClick}>
                            <Menu.Item key="/index/home" >首页</Menu.Item>
                            <Menu.Item key="/index/servicecenter" >服务中心</Menu.Item>
                            <Menu.Item key="/index/staffcenter" >员工中心</Menu.Item>
                            <Menu.Item key="/index/custommanage" >客户管理</Menu.Item>
                            <Menu.Item key="/index/systemmanage" >系统管理</Menu.Item>
                        </Menu>
                    </div>
                    <div className="right">
                        <span>客服工作台</span>
                        <span><img src={kefu} alt="" /></span>
                    </div>
                </Header>
                <Content style={{ padding: 20 }}>
                    {/* 二级路由出口 */}
                    <Outlet />
                </Content>
            </Layout>
        </div>
    );
}
export default Index;